<template>
  <div id="model">
    <div id="chart" ref="chartRef"></div>
    <div class="legend">
      <div class="legend_item" v-for="(item, index) in legendList" :key="index">
        <i></i>
        <div class="legend_info">{{ item.info || '-' }}</div>
        <div>{{ item.value || 0 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import { deviceModelStatistics } from '@/api/dashboard'
import * as echarts from 'echarts'
import 'echarts/theme/macarons'
let chart: any
const chartRef = ref()
enum labelEnum {
  deviceTotalNum = '强震仪',
  edgeTotalNum = '边缘终端',
  powerTotalNum = '智能电源',
}

const legendList = ref([
  {
    info: '强震仪',
    value: 6,
  },
  {
    info: '边缘终端',
    value: 0,
  },
  {
    info: '智能电源',
    value: 4,
  },
])
const total = computed(() => {
  const all = legendList.value.reduce((pre, item) => {
    pre += Number(item.value)
    return pre
  }, 0)
  return all
})
const getInfo = async () => {
  const result = await deviceModelStatistics()
  legendList.value = Object.keys(labelEnum).map((key) => {
    return {
      info: labelEnum[key],
      value: result.data[key],
    }
  })
  const numList = legendList.value.map((i) => i.value)
  nextTick(() => {
    init(numList)
  })
}
getInfo()
const init = (list) => {
  const data1 = list[0]

  const data3 = list.reduce((pre, item) => {
    pre += item
    return pre
  })
  const data2 = list.splice(0, 2).reduce((pre, item) => {
    pre += item
    return pre
  })
  console.log(data1, data2, data3, '数量')

  if (chart) chart.clear()
  chart = echarts.init(chartRef.value)
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 360,
        endAngle: 0,
        min: 0,
        max: total.value,
        splitNumber: 12,
        // itemStyle: {
        //   color: '#58D9F9',
        //   shadowColor: 'rgba(0,138,255,0.45)',
        //   shadowBlur: 10,
        //   shadowOffsetX: 2,
        //   shadowOffsetY: 2,
        // },
        title: {
          offsetCenter: [0, 20],
          fontSize: 20,
          color: '#797A7A',
        },
        progress: {
          show: true,
          roundCap: true,
          width: 30,
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        detail: {
          width: '60%',
          lineHeight: 40,
          height: 40,
          offsetCenter: [0, -10],
          valueAnimation: true,
          formatter: function (value) {
            return '{value|' + total.value + '}'
          },
          rich: {
            value: {
              fontSize: 30,
              fontWeight: 'bolder',
              color: '#777',
            },
          },
        },
        data: [
          //强震仪
          {
            value: data1,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, // 渐变起点 x（0-1）
                y: 0, // 渐变起点 y
                x2: 1, // 渐变终点 x
                y2: 0, // 渐变终点 y
                colorStops: [
                  { offset: 0, color: '#1885FF' }, // 起始颜色
                  { offset: 1, color: '#1874FF' }, // 结束颜色
                ],
              },
            },
          },

          //边缘终端
          {
            value: data2,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, // 渐变起点 x（0-1）
                y: 0, // 渐变起点 y
                x2: 1, // 渐变终点 x
                y2: 0, // 渐变终点 y
                colorStops: [
                  { offset: 0, color: '#FFB818' }, // 起始颜色
                  { offset: 1, color: '#E6870F' }, // 结束颜色
                ],
              },
            },
          },
          //智能电源
          {
            value: data3,
            name: '总数',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, // 渐变起点 x（0-1）
                y: 0, // 渐变起点 y
                x2: 1, // 渐变终点 x
                y2: 0, // 渐变终点 y
                colorStops: [
                  { offset: 0, color: '#0f95af' }, // 起始颜色
                  { offset: 1, color: '#5dcfe7' }, // 结束颜色
                ],
              },
            },
          },
        ],
      },
    ],
  }
  chart.setOption(option)
  addEventListener(
    'resize',
    () => {
      chart.resize()
    },
    false,
  )
}
</script>

<style lang="scss" scoped>
#model {
  width: 100%;
  height: 100%;
  #chart {
    height: 80%;
  }
  .legend {
    height: 20%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 34px;
    color: #121212;
    line-height: 34px;
    &_item {
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: fit-content;
      width: 50%;
      &:first-child {
        border-right: 1px solid #121212;
        i {
          background: linear-gradient(180deg, #2884ed 0%, #9ccaff 93%);
        }
      }
      &:nth-child(2) {
        i {
          background: linear-gradient(180deg, #eabe20 0%, #ffe896 99%);
        }
      }
    }
    i {
      width: 20px;
      height: 20px;
      background: linear-gradient(360deg, #5dcfe7 0%, #0f95af 100%);
    }
    &_info {
      white-space: nowrap;
      margin: 0 48px 0 8px;
    }
  }
}
</style>
